import React, { Component } from 'react';
/* 2 安装并导入query-string */
import queryString from 'query-string'
/* 4 导入axios */
import axios from 'axios'
/* 8 导入样式对页面进行修饰 */
import './index.css'
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            playlist: [],tracks:[]
        }
    }
    render() {
        return (
            <div className='page'>
                {/*  7 对state里的数据进行渲染 */}
                <img className='pic' src={this.state.playlist.coverImgUrl} alt="" />
                <h2 >{this.state.playlist.name}</h2>
               <div className='container'>
                   {this.state.tracks.map(item=>{
                       return (
                           <div className='item' key={item.id}>
                               <img className='itemPic' src={item.al.picUrl} alt="" />
                               <p>{item.name}</p>
                           </div>
                       )
                   })}
               </div>
            </div>
        );
    }
    /* 1  在生命周期中拿到search值 */
    componentDidMount() {
        let search = window.location.search
        /* 3 使用query-string对search值进行解析 */
        var { id } = queryString.parse(search)
        /* 5 通过axios获取接口数据 */
        axios.get(`http://122.112.161.135:3000/playlist/detail?id=${id}`).then(res => {
            /* 6 设置相关值到state中 */
            this.setState({
                playlist: res.data.playlist,
                tracks:res.data.playlist.tracks
            })
        })
    }
}

export default Index;
